<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>ONE默认操作</title>
		<style type="text/css">
			/* 
			id为:  #某某某()
			class为: .某某某() 
			*/
			.class1 {
				border: 1px solid black;
			}

			/* #id1 {
				border: 1px solid blue;
			} */

			#id2 {
				/* border: 2px solid red; */
				float: left;
			}

			#id3 {
				/* border: 5px solid black; */
				float: left;
				margin: 1px;
			}

			#id4 {
				/* border: 10px solid blue; */
				float: left;
				margin: 5px;
				margin-top: -19.9px;
			}

			#id5 {
				float: right;
				margin: 9px;
				margin-top: -40.9px;
			}

			#id6 {
				/* border: 3px solid black; */
				height: auto;
				margin: 100px;
				float: left;
			}

			/* #id7 {
				float: right;
				border: 3px solid red;
				height: 24px;
				width: 170px;
				margin-top: -19px;
				margin: 7px;
			} */


			.class2 {
				/* border: 3px solid red; */

				height: 30px;

				width: 330px;
			}

			#sangeanniu {
				/* border: 2px solid red; */
				float: left;
				height: 30px;
				width: 150px;
				margin: 1px;

			}

			a.button {
				background: #880000;
				border-radius: 40px;
				color: #ffffff;
				display: block;
				font-size: 1.5rem;
				max-width: 150px;
				padding: 15px;
				text-align: center;
				text-decoration: none;
			}

			a.button:hover {
				background: blue;
			}
		</style>
	</head>
	<body>
		<a class="button" href="#">HTML+CSS</a>

		<p><del>测试一下能否进去</del></p>
		<p>在CSS中有两种方式实现：</p>
		<ol>
			<li>内链式代码：style type="text/css"</li>
			<li>嵌入式代码:link rel="stylesheet" href="自己命名.css"</li>
		</ol>
		<p><b><i>如果可以的话，请在下方输入1，并且输入：已完成，请退出。</i></b></p>
		<input type="text" />
		<br />
		<br />
		<p style="color: blue;"><b>下面这是&nbsp;密码框：&nbsp;</b></p>
		<input type="password"><!-- 密码文本框 -->

		<p style="color: pink;"><b><i>下面这是列表：</i></b></p>

		<ol>
			<li>abcdefghi</li>
			<li>123456789</li>
		</ol>

		<br />

		<p style="color: red;"><b>这是内链式div效果：</b></p>

		<div style="border: 1px solid red;">
			<p>请在以下单选框中选择：5355</p>
			<input type="radio" name="one">5311
			<input type="radio" name="one">5333
			<input type="radio" name="one">5344
			<input type="radio" name="one">5355
		</div>

		<p style="color: blue;"><b><i>接下来要看的是嵌入式:</i></b></p>

		<div class="class1">
			<p><i>请在以下单选框中选择：你还好吗？ 注：如果只能选择一个单选框，请进入到HTML中删除只能选择一个单选框的源代码</i></p>
			<input type="radio" name="one">你
			<input type="radio" name="one">还
			<input type="radio" name="one">好
			<input type="radio" name="one">吗？
		</div>

		<br /><!-- 这是换行 -->
		<br /><!-- 十大 -->

		<!-- <div id="id1">
			<p>打发士大夫十分</p>
		</div> -->
		<div id="id2">
			<input type="password" maxlength="20"><br /><!-- 这是文本框也可以称作密码输入框 -->
			<br />
			<p><b>下面的所有按钮需要配合js进行下一步（简称动态）：</b></p>

			<div class="class2">
				<div id="sangeanniu">
					<div id="id3">
						<input type="button" maxlength="20" value="按钮" />
					</div>
					<br />
					<div id="id4">
						<input type="submit" maxlength="20" />
					</div>
					<br />
					<div id="id5">
						<input type="reset" maxlength="20" />
					</div>
				</div>
				<br />
				<div id="id7">
					<input type="file" />
				</div>
			</div>
			<div id="id6">
				<input type="image" src="python.jpg" />
			</div>
		</div>

	</body>

</html>